<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格全选练习</title>
        <style>
            table {
                border: 1px solid;
                width: 500px;
                margin-left: 30%;
            }

            th, td {
                border: 1px solid;
                text-align: center;
            }

            div {
                margin-top: 10px;
                margin-left: 30%;
            }

            .out {
                background-color: white;
            }

            .over {
                background-color: pink;
            }

        </style>

        <script>
            //1.在页面加载完成后绑定事件
            window.onload = function () {
                //2.给全选按钮绑定单击事件
                document.getElementById("selectAll").onclick = function () {
                    //3.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //4.遍历数组
                    for (var i = 0; i < cbs.length; i++) {
                        //5.设置每一个cb状态为选中状态
                        cbs[i].checked = true;

                    }


                }
                //3.给全不选按钮绑定单击事件
                document.getElementById("unselectAll").onclick = function () {
                    //3.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //4.遍历数组
                    for (var i = 0; i < cbs.length; i++) {
                        //5.设置每一个cd状态为未选中状态
                        cbs[i].checked = false;

                    }
                }

                //4.给反选按钮绑定单击事件
                document.getElementById("selectRev").onclick = function () {
                    //3.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //4.遍历数组
                    for (var i = 0; i < cbs.length; i++) {
                        //5.设置每一个cd状态为相反
                        cbs[i].checked = !cbs[i].checked;
                    }
                }

                //5.给第一个CheckBox绑定单击事件
                document.getElementById("firstCb").onclick = function () {
                    //3.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //4.遍历数组
                    for (var i = 0; i < cbs.length; i++) {
                        //5.设置每一个cd状态和第一个cd状态一致
                        cbs[i].checked = this.checked;
                    }
                }

                //6.给每一行绑定鼠标移入和移出事件
                //获取所有的行
                var trs = document.getElementsByTagName("tr")
                for (var i = 0; i < trs.length; i++) {
                    //绑定鼠标移入元素事件 onmouseover
                    trs[i].onmouseover = function () {
                        this.className = "over";
                    };
                    //绑定鼠标移出元素事件 onmouseover
                    trs[i].onmouseout = function () {
                        this.className = "out";
                    };

                }

            }


        </script>


    </head>
    <body>
        <table>
            <caption>学生信息表</caption>
            <tr>
                <th><input type="checkbox" name="cb" id="firstCb"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>1</td>
                <td>令狐冲</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>2</td>
                <td>任我行</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>3</td>
                <td>向问天</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>
        </table>
        <div>
            <input type="button" id="selectAll" value="全选">
            <input type="button" id="unselectAll" value="全不选">
            <input type="button" id="selectRev" value="反选">
        </div>

    </body>
</html>